import React, { Component } from 'react';
import Swiper from 'react-id-swiper';
 

class ContentBox extends Component {
    
    constructor(props) {
        debugger
        super(props);
        this.swiper = null
        this.tabsClassNames=['hk','hk','hk','hk']
        this.state={
            silderIndex:0
        }
        console.log(props.match)
    }
    componentDidMount() {
    }
    transitionEnd = () => {
        if(this.swiper){
            this.setState({
                silderIndex: this.swiper.realIndex
            })
            console.log(this.swiper.realIndex)
            this.props.OnChangeSilder(this.swiper.realIndex)
        }
        
        // console.log(this.state.silderIndex)
     }
    render() {
        return (
            <div className={this.tabsClassNames[this.state.silderIndex]}>
                <Swiper initialSlide={this.state.silderIndex}  on={{ transitionEnd: this.transitionEnd }} ref={node => node ? this.swiper = node.swiper : ""} >
                    <div  >
                        1111
                     </div>
                    <div  >
                        22222222
                     </div>
                    <div >
                        3333333333
                     </div>

                </Swiper>
            </div>
        );
    }
}
export default ContentBox;